<template>
  <div style="width:1000px;margin:0 auto;">
    <div>
      <a-button type="primary" @click="refresh">刷新</a-button>
      <div style="float: right">
        <a-form layout="inline">
          <a-form-item label="背景">
            <a-select size="small" style="width: 80px" :value="options.bgColor" @change="e => this.setOptions({ bgColor: e})">
              <a-select-option v-for="bg in bgs" :key="bg.color" :value="bg.color" >{{ bg.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="novel-container">
      
      <div v-if="loading">加载中...</div>
      <template v-else >
        <div class="novel-page">
            <router-link class="novel-page-link" v-for="c in chapterList.filter(x => x.id)" :key="c.title" :to="toLink(c)">{{ linkMap[c.title] }}</router-link>
        </div>
        <div v-html="html"></div>
        <div class="novel-page">
            <router-link class="novel-page-link" v-for="c in chapterList.filter(x => x.id)" :key="c.title" :to="toLink(c)">{{ linkMap[c.title] }}</router-link>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data () {
    return {
      linkMap: {
        'Prev': '上一页',
        'Index': '目录',
        'Next': '下一页'
      },
      bgs: [
        {
          'color': '#E9FAFF',
          'name': '默认'
        },
        {
          'color': '#FFFFFF',
          'name': '白雪'
        },
        {
          'color': '#000000',
          'name': '漆黑'
        },
        {
          'color': '#FFFFED',
          'name': '明黄'
        },
        {
          'color': '#EEFAEE',
          'name': '淡绿'
        },
        {
          'color': '#CCE8CF',
          'name': '草绿'
        },
        {
          'color': '#FCEFFF',
          'name': '红粉'
        },
        {
          'color': '#EFEFEF',
          'name': '深灰'
        },
        {
          'color': '#F5F5DC',
          'name': '米色'
        },
        {
          'color': '#D2B48C',
          'name': '茶色'
        },
        {
          'color': '#C0C0C0',
          'name': '银色'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      html: state => state.Novel.html,
      chapterList: state => state.Novel.chapterList,
      loading: state => state.Novel.loading,
      options: state => state.Novel.options
    })
  },
  created () {
    this.getDetail()
    this.handler = (ev) => {
      if (ev.keyCode === 37) {
        this.prev()
      }
      if (ev.keyCode === 39) {
        this.next()
      }
      if (ev.keyCode === 13) {
        this.index()
      }
    }
    window.addEventListener('keyup', this.handler)
    let options = localStorage.getItem('chapter-options')
    if (options) {
      options = JSON.parse(options)
      this.setOptions(options)
    }
  },
  destroyed () {
    window.removeEventListener('keyup', this.handler)
  },
  watch: {
    $route (to, from) {
      this.getDetail()
      document.body.scrollTop = 0 // For Safari
      document.documentElement.scrollTop = 0 // For C
    }
  },
  methods: {
    ...mapMutations(['setOptions']),
    ...mapActions(['fetchNovelChapter']),
    next () {
      const c = this.chapterList.find(x => x.title === 'Next')
      if (c.id) {
        this.$router.push(this.toLink(c))
      }
    },
    prev () {
      const c = this.chapterList.find(x => x.title === 'Prev')
      if (c.id) {
        this.$router.push(this.toLink(c))
      }
    },
    index () {
      const c = this.chapterList.find(x => x.title === 'Index')
      if (c.id) {
        this.$router.push(this.toLink(c))
      }
    },
    toLink (c) {
      if (c.title === 'Index') {
        return `/novel/${c.id}`
      } else {
        if (c.id) {
          return `/novel/chapter?novelId=${this.$route.query.novelId}&chapterId=${c.id}`
        }
      }
    },
    refresh () {
      this.getDetail(true)
    },
    getDetail (refresh = false) {
      const { $route } = this
      this.fetchNovelChapter({ novelId: $route.query.novelId, chapterId: $route.query.chapterId, refresh })
    }
  }
}
</script>

<style>
.novel-content {
  font-size: 26px;
  color: rgb(85, 85, 85);
}
.novel-title {
  text-align: center;
}
.novel-page {
  text-align: center;
}
.novel-page-link {
  display: inline-block;
  margin-right: 16px;
}
</style>>